<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增外呼任务')" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-callTask-add">
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required" th:text="#{callTask.form.batchName}"></label>
                    <div class="col-sm-8">
                        <input name="batchName" class="form-control" type="text" required>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required" th:text="#{callTask.form.taskType}"></label>
                    <div class="col-sm-6">
                        <select name="taskType" class="form-control" required>
                            <option value="0" th:text="#{callTask.form.taskType0}"></option>
                            <option value="1" th:text="#{callTask.form.taskType1}"></option>
                            <option value="2" th:text="#{callTask.form.taskType2}"></option>
                        </select>
                    </div>
                    <div class="col-sm-2">
                        <!-- 添加下载模板的链接 -->
                        <a href="javascript:void(0);" onclick="downloadTemplate()">
                            <span th:text="#{callTask.form.downloadTemplate}">下载模板</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group" style="display:none;">
                    <label class="col-sm-3 control-label is-required" th:text="#{callTask.form.groupId}"></label>
                    <div class="col-sm-8">
                        <select name="groupId" class="form-control" required>
                            <option value="" th:text="#{callTask.form.groupId.empty}"></option>
                            <!-- 业务组选项将通过接口动态加载 -->
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group" style="display:none;">
                    <label class="col-sm-3 control-label is-required"  th:text="#{callTask.form.conntectRate}"></label>
                    <div class="col-sm-8">
                        <input name="conntectRate" class="form-control" type="number" min="0" max="100" step="1" required>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group" style="display:none;">
                    <label class="col-sm-3 control-label is-required"  th:text="#{callTask.form.avgRingTimeLen}"></label>
                    <div class="col-sm-8">
                        <input name="avgRingTimeLen" class="form-control" type="text" required>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group" style="display:none;">
                    <label class="col-sm-3 control-label is-required"  th:text="#{callTask.form.avgCallTalkTimeLen}"></label>
                    <div class="col-sm-8">
                        <input name="avgCallTalkTimeLen" class="form-control" type="text" required>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group" style="display:none;">
                    <label class="col-sm-3 control-label is-required"  th:text="#{callTask.form.avgCallEndProcessTimeLen}"></label>
                    <div class="col-sm-8">
                        <input name="avgCallEndProcessTimeLen" class="form-control" type="text" required>
                    </div>
                </div>
            </div>


            <div class="col-xs-12">
                <div class="form-group" style="display:none;">
                    <label class="col-sm-3 control-label is-required"  th:text="#{callTask.form.threadNum}"></label>
                    <div class="col-sm-8">
                        <input name="threadNum" class="form-control" type="text" required>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group" style="display:none;">
                    <label class="col-sm-3 control-label is-required" th:text="#{callTask.form.gatewayId}"></label>
                    <div class="col-sm-8">
                        <select name="gatewayId" class="form-control" required>
                            <option value="" th:text="#{callTask.form.gatewayId.empty}"></option>
                            <!-- 网关选项将通过接口动态加载 -->
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group" style="display:none;">
                    <label class="col-sm-3 control-label is-required" th:text="#{callTask.form.llmAccountId}"></label>
                    <div class="col-sm-8">
                        <select name="llmAccountId" class="form-control" required>
                            <option value="" th:text="#{callTask.form.llmAccountId.empty}"></option>
                            <!-- 大模型底座选项将通过接口动态加载 -->
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group" style="display:none;">
                    <label class="col-sm-3 control-label" th:text="#{callTask.form.voiceCode}"></label>
                    <div class="col-sm-8">
                        <select name="voiceCode" class="form-control">
                            <option value="" th:text="#{callTask.form.voiceCode.empty}" ></option>
                            <!-- 音色选项将通过接口动态加载 -->
                        </select>
                    </div>
                </div>
            </div>

            <div class="col-xs-12">
                <div class="form-group" style="display:none;">
                    <label class="col-sm-3 control-label is-required"  th:text="#{callTask.form.playTimes}"></label>
                    <div class="col-sm-8">
                        <input name="playTimes" class="form-control" type="text" required>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript">
        var prefix = ctx + "aicall/callTask";

        $(function() {
            // 加载网关下拉框数据
            $.ajax({
                url: ctx + "cc/gateways/outbound",
                success: function(rsp) {
                    var gatewaySelect = $('select[name="gatewayId"]');
                    gatewaySelect.empty();
                    gatewaySelect.append('<option value="">' + i18n('callTask.form.gatewayId.empty') + '</option>');
                    rsp.data.forEach(function(gateway) {
                        gatewaySelect.append($("<option>").attr("value", gateway.id).text(gateway.gwDesc));
                    });
                }
            });

            // 加载音色下拉框数据
            $.ajax({
                url: ctx + "aicall/ttsAliyun/all",
                success: function(rsp) {
                    var voiceSelect = $('select[name="voiceCode"]');
                    voiceSelect.empty();
                    voiceSelect.append('<option value="">' + i18n('callTask.form.voiceCode.empty') + '</option>');
                    rsp.data.forEach(function(voice) {
                        voiceSelect.append($("<option>").attr("value", voice.voiceCode).text(voice.voiceName));
                    });
                }
            });
            // 加载大模型底座下拉框数据
            $.ajax({
                url: ctx + "aicall/account/all",
                success: function(rsp) {
                    var llmAccountSelect = $('select[name="llmAccountId"]');
                    llmAccountSelect.empty();
                    llmAccountSelect.append('<option value="">' + i18n('callTask.form.llmAccountId.empty') + '</option>');
                    rsp.data.forEach(function(llmAccount) {
                        llmAccountSelect.append($("<option>").attr("value", llmAccount.id).text(llmAccount.name));
                    });
                }
            });

            // 加载业务组下拉框数据
            $.ajax({
                url: ctx + "cc/bizgroup/all",
                success: function(rsp) {
                    var groupSelect = $('select[name="groupId"]');
                    groupSelect.empty();
                    groupSelect.append('<option value="">' + i18n('callTask.form.groupId.empty') + '</option>');
                    rsp.data.forEach(function(bizGroup) {
                        groupSelect.append($("<option>").attr("value", bizGroup.groupId).text(bizGroup.bizGroupName));
                    });
                }
            });

            // 监听 taskType 的变化
            $('select[name="taskType"]').change(function() {
                var taskType = $(this).val();
                // 隐藏所有字段
                $('select[name="groupId"], input[name="conntectRate"], input[name="avgRingTimeLen"], input[name="avgCallTalkTimeLen"], input[name="avgCallEndProcessTimeLen"], input[name="threadNum"], select[name="gatewayId"], select[name="llmAccountId"], select[name="voiceCode"], input[name="playTimes"]').parent().parent().hide();

                // 根据 taskType 显示对应的字段
                if (taskType === "0") {
                    $('select[name="groupId"], input[name="conntectRate"], input[name="avgRingTimeLen"], input[name="avgCallTalkTimeLen"], input[name="avgCallEndProcessTimeLen"], input[name="threadNum"], select[name="gatewayId"]').parent().parent().show();
                } else if (taskType === "1") {
                    $('input[name="threadNum"], select[name="gatewayId"], select[name="llmAccountId"], select[name="voiceCode"]').parent().parent().show();
                } else if (taskType === "2") {
                    $('input[name="threadNum"], select[name="gatewayId"], input[name="playTimes"], select[name="voiceCode"]').parent().parent().show();
                }
            });

            // 默认选中AI外呼
            $("select[name='taskType']").val("1");
            // 初始化时根据默认值显示字段
            $('select[name="taskType"]').trigger('change');
        });

        // 表单验证
        $("#form-callTask-add").validate({
            focusCleanup: true
        });

        // 提交处理
        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/add", $('#form-callTask-add').serialize());
            }
        }

        // 下载模板
        function downloadTemplate () {
            var taskType = $("select[name='taskType']").val();
            var templateUrl = prefix + "/downloadTemplate?taskType=" + taskType; // 假设模板文件放在静态资源目录下
            window.location.href = templateUrl;
        };
    </script>
</body>
</html>